<template>
  <view class="oto-form">
    <slot />
  </view>
</template>

<script>
  export default {
    name: 'OtoForm',
    provide() {
      return {
        otoForm: this //传递Form实例给后代，比如FormItem用来校验, 也可以直接使用$parent穿透
      };
    },
    props: {
      model: {
        type: Object,
        default() {
          return {};
        }
      },
      rules: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    data() {
      return {
        // 所有的item子元素，选择方案1=>使用插槽传导父元素this，需要多写插槽语法，
        // 方案2=>使用provide/inject
        // 方案3=>发布订阅
        //   items: items,
      };
    },
    created() {
      // 存储当前form下的所有oto-form-item的实例
      // 不能定义在data中，否则微信小程序会造成循环引用而报错
      this.items = [];
    },
    methods: {
      // 注册item进form中
      registryItem(item) {
        this.items.push(item);
      },
      validate(cb) {
        return new Promise((resolve, reject) => {
          // 对所有的oto-form-item进行校验
          let valid = true; // 默认通过
          let count = 0; // 用于标记是否检查完毕
          const errorArr = []; // 存放错误信息
          this.items.map((item) => {
            item.validate({}, (error) => {
              // 如果任意一个oto-form-item校验不通过，就意味着整个表单不通过
              if (error) {
                valid = false;
                errorArr.push(error);
              }
              // 当历遍了所有，调用promise的then方法
              if (++count === this.items.length) {
                // 校验通过
                valid && resolve(valid);
                // 校验失败
                !valid && reject(errorArr);
                // 调用回调方法
                if (typeof cb === 'function') cb({ valid, errorArr });
              }
            });
          });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .oto-form {
  }
</style>
